<template>
  <div>
    <div class="aboutMe">
      <div class="introduce">
        <img class="headImg" src="@/assets/lunai.jpg" />
        <h1>{{ this.user.name }}</h1>
        <h2>{{ this.user.signature }}</h2>
        <div class="content">
          <div
            style="background-color: #ffffff; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
            你好，这里是缩月的个人博客，大四学生一枚，对前端相关技术较为感兴趣，抱着练手学习的想法搭建了这一博客。</div>
          <div
            style="background-color: #ffffff; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
            博客前后端部分参考了这个项目</div>
          <div
            style="background-color: #ffffff; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
            <a href="https://github.com/60late/vue-nodejs-blog">60late/vue-nodejs-blog: vue+nodejs+express+mysql+ueditor
              前后端分离博客项目 (github.com)</a>
          </div>
          <div
            style="background-color: #ffffff; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
            个人博客前端上采用了<em>vue3+ts</em>开发<span
              style="text-decoration: line-through;">（虽然typescript大部分情况下都是anyscript）</span>
          </div>
          <div
            style="background-color: #ffffff; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
            其中vue3部分使用了setup语法去尝试编写,ui框架使用了ant-design-vue</div>
          <div
            style="background-color: #ffffff; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
            项目地址见：<a href="https://gitee.com/suoyue/runblog-frontend">runblog，nodejs+vue3 (gitee.com)</a></div>
          <div
            style="background-color: #ffffff; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
            后端使用了nodejs+express搭建，其中使用了jwt验证登录信息，mysql当数据库。</div>
          <div
            style="background-color: #ffffff; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
            后端项目地址见：<a href="https://gitee.com/suoyue/runblog">runblog，nodejs+vue3 (gitee.com)</a></div>
          <div
            style="background-color: #ffffff; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
            本人的gitee空间：<a
              style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;"
              href="https://gitee.com/suoyue">suoyue (suoyue) - Gitee.com</a></div>
        </div>
        <table class="stack">
          <tr>
            <th width="20%" style="text-align: left;">技术栈</th>
            <th width="20%">了解</th>
            <th width="20%">熟悉</th>
            <th width="20%">熟练</th>
            <th width="20%">精通</th>
          </tr>
          <tr v-for="skill in skills" :key="skill.name">
            <td>{{ skill.name }}</td>
            <td colspan="4">
              <a-progress :stroke-color="skill.color" :percent="skill.degree" status="active" type="line" :steps="4" />
            </td>
          </tr>
          <!--了解 15%，熟悉35%，熟练掌握60%，精通85%-->
        </table>
      </div>

    </div>
    <MyFooter></MyFooter>
  </div>

</template>

<script>
import MyFooter from '../components/MyFooter.vue';
export default {
  name: 'aboutMe',
  components: {
    MyFooter
  },
  data() {
    return {
      user: {
        name: '缩月',
        signature: 'Hang on to your dream',
        breif: 'Hello world',
      },
      skills: [
        {
          name: 'Html+Css',
          degree: 80,
          color: {
            from: '#108ee9',
            to: '#87d068',
          }
        },
        {
          name: 'JS+ES6',
          degree: 70,
          color: {
            from: '#5e00ff',
            to: '#9000ff',
          }
        },
        {
          name: 'TypeScript',
          degree: 20,
          color: {
            from: '#ec008c',
            to: '#6739b6',
          }
        },
        {
          name: 'Vue全家桶',
          degree: 60,
          color: {
            from: '#0081ff',
            to: '#1cbbb4',
          }
        },
        {
          name: 'Node.js',
          degree: 30,
          color: {
            from: '#ed1c24',
            to: '#ff9700',
          }
        },
        {
          name: '微信小程序',
          degree: 50,
          color: {
            from: '#39b54a',
            to: '#8dc63f',
          }
        },
        {
          name: 'Git',
          degree: 20,
          color: {
            from: '#108ee9',
            to: '#87d068',
          }
        },
        {
          name: '前端工程化',
          degree: 20,
          color: {
            from: '#ec008c',
            to: '#f43f3b',
          }
        },
      ],
      showDegree: false,//展示熟练度条
      isActive: true,//激活发廊滚动条效果
      activeClass: 'flow',//激活的class
    }
  },
  mounted() {
    this.showDegree = true;

  },
  methods: {
    stopMove() {
      this.isActive = !this.isActive;
    }
  },
}
</script>

<style scoped lang="less">
.aboutMe {
  text-align: center;
  padding: 30px;

  .introduce {
    padding: 30px;
    box-sizing: border-box;
    min-height: 100%;

    .content {
      margin: 10px 0;
      padding: 10px 3px;
      border-radius: 3px;
      background-color: white;

      div {
        white-space: normal !important;
        word-break: break-all;
        overflow: hidden;
      }
    }

    .headImg {
      border-radius: 50%;
      width: 150px;
      height: 150px;
    }

    h1 {
      font-size: 25px;
      margin-top: 10px;
    }

    h2 {
      font-size: 18px;
      font-weight: normal;
    }

    p {
      font-size: 16px;
      max-width: 500px;
      margin: 20px auto;
    }
  }

  .stack {
    width: 80%;
    margin: 40px auto 20px;
    text-align: left;

    th {
      text-align: center;
    }

    tr {
      height: 50px;
      line-height: 50px;
      font-size: 16px;

      td {
        vertical-align: middle;
        overflow: hidden;
        position: relative;
      }
    }

    .degree {
      height: 30px;
      margin: auto 0;
      overflow: hidden;
      background-size: 50px 50px;
      background-image: linear-gradient(135deg, transparent, transparent 25%, rgba(255, 255, 255, 0.8) 25%, rgba(255, 255, 255, 0.8) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.8) 75%, rgba(255, 255, 255, 0.8) 100%);

    }

    .flow {
      animation: degreeMove 1s linear infinite;
    }

    /*控制技能表运动的css*/
    .showDegree-enter-active {
      transition: all 2s ease;
    }

    .showDegree-leave-active {
      transition: all 2s ease;
    }

    .showDegree-enter,
    .showDegree-leave-to {
      transform: translateX(-100%);
      opacity: 0;
    }

    @keyframes degreeMove {
      0% {}

      100% {
        background-position: 100px 0;
      }
    }
  }

  .stop {
    width: 120px;
    height: 40px;
    cursor: pointer;
    border: 1px solid;
    border-radius: 5px;
    background: #d9534f;
    color: white;
  }
}

@media screen and (max-width: 900px) {
  .aboutMe {
    padding: 30px 0;

    .introduce {
      padding: 30px 10px;
    }

    .stack {
      width: 100%;

      tr,
      td {
        font-size: 0.5rem;
      }
    }
  }
}
</style>
